
<template>
    <div v-if="data">
      <div class="right-mk">
        <i v-show="!openSearch" class="el-icon-search" @click="onSearch"></i>
        <div v-show="openSearch" class="s-flex search-box slide-out-top ">
          <el-input v-model="search" prefix-icon="el-icon-search" placeholder="请输入内容搜搜..." class="search" @on-enter="searchData"/>
          <span class="search-text"><el-button type="text" @click="searchData">搜索</el-button></span>
          <el-button type="text" icon="plus-round" @click="resetSearch" v-show="searchStatus" >重置</el-button>
        </div>
        <!-- <i v-show="!openSearch" class="el-icon-edit" @click="onEdit"></i> -->
        <!-- <el-switch
                    v-model="editValue"
                    active-text="编辑"
                    inactive-text="NO" 
                    @change="changeEdit">
                </el-switch> -->
      </div>
      ==== {{ menus }} == {{ ifEdit }}
        <nav-sub :data="data" :editStatus="editStatus" :spinShow="spinShow"></nav-sub>
      <footer class="footer">
          ©{{ year }} 作者：Galen ｜前端工程师 <a href="https://github.com/gqzydh" target="_blank">GitHub</a>
      </footer>
    </div>
</template>
<script>
import NavSub from '@/components/card/sub'
import { mapActions, mapGetters } from 'vuex'
// import Data from '@/data/data'
export default {
    data () {
        return {
            isCollapsed: false,
            search: '',
            searchStatus: false,
            data: null,
            childrenList: [],
            sourceData: '',
            serarchNum: 0,
            spinShow: false,
            editStatus: false,
            editValue: null,
            isCollapse: true,
            year: "2023",
            visible: false,
            openSearch: false
        }
    },
    computed: {
        ...mapGetters([
            'favoriteList',
            'usedList',
            'ifEdit',
            'menus'
        ]),
        menuitemClasses: function () {
            return [
                'menu-item',
                this.isCollapsed ? 'collapsed-menu' : ''
            ]
        }
    },
    created: function() {
        window.console.group('------Create创建前状态111------');
        this._getData()
    },
    mounted() {
        console.log("object===", this.ifEdit, this.menus);
        if(this.ifEdit ){
            this.editValue = this.ifEdit
        }
    },
    methods: {
        _getData() {
            this.spinShow = true;
            this.$axios
              .get("/data/nav.json") // 获取nav数据
              .then(rep => {
                  this.data = rep.data;
                  let menuAll = []
                  for (let i in this.data) {
                    const obj = {
                        id: this.data[i].id,
                        name: this.data[i].name,
                        title: this.data[i].title
                    }
                    menuAll.push(obj)
                  }
                //   this.saveMenus(menuAll)
                  console.log("object", menuAll);
                  for (let key in this.data) {
                    if (this.data[key].hasOwnProperty("children")) {
                      this.childrenList = this.childrenList.concat(this.data[key].children);
                    }
                  }
                  this.spinShow = false;
              })
              .catch(e => {
                this.$message.error('获取数据失败!');
                  window.console.log("错误信息：",e);
              });
        },
        jumpAnchor (name) {
          if (document.documentElement.clientWidth <= 768 ){
            this.isCollapsed = true
          }

          let offset = 66; 
          let el = document.querySelector('#' + name); 
          window.scroll({ top: (el.offsetTop - offset), left: 0, behavior: 'smooth' });
        },
        onSearch () {
          this.openSearch = true
        },
        searchData () {
            if (typeof this.search === 'undefined' || this.search === null || this.search === '') {
                this.$message.error('输入内容呀！');
                return true
            }
            if (!this.searchStatus) {
                this.sourceData = JSON.parse(JSON.stringify(this.data))
            } else {
                this.data = JSON.parse(JSON.stringify(this.sourceData))
            }
            this.searchStatus = true
            this.serarchNum = 0
            for (let d in this.data) {
                if ( ! this.data[d].hasOwnProperty("nav")) {
                  continue
                }
                for (let i = 0; i < this.data[d]['nav'].length; i++) {
                    if (this.data[d]['nav'][i]['name'].toLowerCase().indexOf(this.search.toLowerCase()) === -1) {
                        if (this.data[d]['nav'][i]['link'].toLowerCase().indexOf(this.search.toLowerCase()) === -1) {
                            this.data[d]['nav'].splice(i--, 1)
                        } else {
                            this.serarchNum++
                        }
                    } else {
                        this.serarchNum++
                    }
                }
            }
            if (this.serarchNum === 0) {
                this.$message.error('没找到哦，请重试!')
            } else {
                this.$Message.success('查找到了' + this.serarchNum + '个相近的.')
            }
        },
        resetSearch () {
            this.spinShow = true
            this.searchStatus = false
            this.search = ''
            this.serarchNum = 0
            this.data = JSON.parse(JSON.stringify(this.sourceData))
            setTimeout(() => {
                this.spinShow = false
            }, 1000)
            this.openSearch = false
        },
        changeEdit() {
            console.log("object", this.editValue);
            if(this.editValue) {
                this.editStatus = true
                this.saveEditStatus(true)
            } else {
                this.editStatus = false
                this.saveEditStatus(false)
            }
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        ...mapActions(['saveEditStatus', 'saveMenus']),
    },
    components: {
        NavSub
    }
}
</script>

<style lang="less" scoped>
.container{
    position: relative;
}
.content{
    position: absolute;
    width: 100%;
    top: 60px;
    // margin: 80px 20px 0;
    // background: #fff;
    // min-height: 500px;
}
.left-menu {
    position: fixed;
    height: 100vh;
    left: 0;
    background-color: #30333c;
    color: #fff;
    text-align: center;
    line-height: 2;
    z-index: 2;
    .logo-text{
        padding: 20px 10px 10px 10px;
        a{
            // background-color: #fff8ee;
            color: #f5f7f9;
            font-size: 32px;
            font-weight: bolder;
            white-space: nowrap;
            padding: 10px 16px;
            border-radius: 4px;
            text-shadow: 0 1px 1px #ff9900;;
        }
    }
    .el-menu-item{
        color: #6b7386;
        text-align: left;
        &:hover{
            background: none;
            color: #fff
        }
    }
}
.header{
    position: fixed;
    top: 0;
    width: calc(100% - 120px);
    padding-top: 10px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    z-index: 2;
}
.main{
    flex-direction: column;
    display: flex;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
    overflow: initial;
    // padding-top: 76px;
}
.footer{
    text-align: center;
    color: #6b7386;
    padding-top: 16px;
}
.layout-header-bar{
    position: fixed; 
    width: 100%;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    z-index: 99;
    .header-r{
        text-align: right;
        padding-right: 230px;
    }
}
.menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 120px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
}
.menu-item i{
    transform: translateX(0);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
}
.collapsed-menu span{
    width: 0;
    transition: width .2s ease;
}
.collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
}
.ivu-layout-sider {
    z-index: 100;
}
.logo-con img {
    width: 180px;
    margin: 10px;
}
.right-mk{
  position: fixed;
  top: 16%;
  right: 8px;
   width: 15px;
   padding: 10px;
   .search-box{
    right: 0;
    width: 300px;
    border-radius: 2px;
    background-color: #fff;
    border-bottom: 1px solid #a5a5a5;
    // box-shadow: 0 px 2px rgba(0,0,0,0.3);
   }
   .s-flex{
     position: absolute;
     z-index: 7;
   }
}
.search {
    width: 200px;
    @media screen {
        @media (max-width: 768px) {
            width: auto;
        }
    }
    .el-input__inner{
      border: none;
    }
}
.search-text {
    margin: 0 10px;
    @media screen {
        @media (max-width: 768px) {
            margin: 0 3px;
        }
    }
}
.ivu-layout-header {
    @media screen {
        @media (max-width: 768px) {
            padding: 0 0 0 20px;
        }     
    }
}
.layout-right {
    margin-left: 200px;
    @media screen {
      @media (max-width: 768px) {
          margin-left: 0;
      }     
  }
}

.fade-in-top {
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  -webkit-transform: max-height 0.5s ease-out;
  max-height: 0;
}
.slide-out-top {
  max-height: 300px; 
  transition: max-height 0.5s ease-in;
  -webkit-transform: max-height 0.5s ease-in;
}
</style>